<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .outer {
      width: 640px;
      margin: 50px auto;
      text-align: center;
    }
  </style>
  <script defer src="./Script/9.练习.js"></script>
  <body>
    <div class="outer">
      <!-- 显示第几张图片,一共有多少张图片 -->
      <p class="info">1</p>
      <div class="img-wrapper">
        <img src="/JavaScript/10.DOM/images/1.png" alt="这是一个图片" />
      </div>
      <div class="btn-wrapper">
        <button id="prev">上一张</button>
        <button id="auto">1</button>
        <button id="next">下一张</button>
      </div>
    </div>
    <script>
      /* 
        实现轮播图效果

        */
      //    先实现自动轮播下一章的效果
      let timer;
      const btnAuto = document.getElementById('auto');
      /* 
        先获取btnNext的click切换下张图的效果,然后在定时器中调用,这样子就可以完成轮播一个图,轮播多个图,就可以通过在setTimeout中
        回调time的函数,来实现多次轮播,但是如果多次点击就会导致队列中无限排队,导致出现了我们不想达到的效果.
        我们可以退通过声明一个外部函数,存储定时器的值,然后在定时器开始就取消定时器,后启用回调,效果是一样的.但可以避免出现消息队列爆满的情况
        开启一个定时器的同时关闭一个定时器
    */
      btnAuto.addEventListener('click', () => {
        clearTimeout(timer);
        timer = setTimeout(function time() {
          btnNext.click();
          timer = setTimeout(time, 3000);
        }, 3000);
      });

      // 我们要实现点击按钮就可以上下页图片
      // 获取按钮和图片的对象
      const img = document.querySelector('img');
      console.log(img);
      const btnPrev = document.getElementById('prev');

      const btnNext = document.getElementById('next');
      const info = document.getElementsByClassName('info')[0];
      console.log(info);
      console.log(btnNext);
      console.log(btnPrev);
      // 把全部要用到的图片存到一个数组中,好用来处理上下页图片.
      let arrImg = [
        '/JavaScript/10.DOM/images/1.png',
        '/JavaScript/10.DOM/images/2.png',
        '/JavaScript/10.DOM/images/3.png',
        '/JavaScript/10.DOM/images/4.png',
        '/JavaScript/10.DOM/images/5.png',
      ];

      console.log(arrImg[0]);
      // 开始操作按钮,
      let i = 0;
      info.textContent = `总共有 ${arrImg.length} 张图片,现在是第 ${i + 1} 张图片`;

      btnPrev.addEventListener('click', function () {
        i--;
        // 检查是否合法,不合法就直接到最后一张图片,另一个按钮反之
        if (i < 0) {
          i = arrImg.length - 1;
        }
        img.src = arrImg[i];
        info.textContent = `总共有 ${arrImg.length} 张图片,现在是第 ${i + 1} 张图片`;
      });
      btnNext.addEventListener('click', function () {
        i++;
        if (i > arrImg.length - 1) {
          i = 0;
        }
        img.src = arrImg[i];
        info.textContent = `总共有 ${arrImg.length} 张图片,现在是第 ${i + 1} 张图片`;
      });
      // 现在解决由于i++到5时,为Undefined导致的找不到图片问
      // 并向inof文本节点上输出现在有几张,是第几张
    </script>
  </body>
</html>
